<template>
	<Top-Page class="login-index register-wrap">
		<cu-custom bgColor="bg-gradual-white-2" :isBack="true"></cu-custom>
		<view class="login-content">
			<view class="head register-head">
				<view class="register-head__title">欢迎注册</view>
				<view>注册畅了号从此无忧</view>
			</view>

			<view class="from-wrap register__from-wrap">
				<form>
					<Field
						clearable
						autosize
						:maxlength="32"
						:leftIcon="'../../static/image/login/account.png'"
						autocomplete="off"
						v-model.trim="regForm.account"
						placeholder="账号"
						@input="handleInput"
					/>

					<Field
						clearable
						autosize
						:maxlength="32"
						:leftIcon="'../../static/image/login/nickname.png'"
						autocomplete="off"
						v-model.trim="regForm.realname"
						placeholder="昵称"
					/>

					<Field
						v-if="parseInt(globalConfig.sysInfo.regauth)"
						autosize
						type="text"
						:maxlength="32"
						:leftIcon="'../../static/image/login/code.png'"
						autocomplete="off"
						v-model.trim="regForm.code"
						placeholder="请输入验证码"
					>
						<template #button>
							<view
								:class="['code-btn', { 'code-btn__disabled': count_down }]"
								@click.stop="
									codeConfig.getCode(regForm.account, {
										account: regForm.account,
										type: 2,
									})
								"
							>
								{{ codeConfig.codeText }}
								<span v-if="count_down > 0">{{ count_down }}s</span>
							</view>
						</template>
					</Field>

					<Field
						type="password"
						clearable
						:maxlength="32"
						:leftIcon="'../../static/image/login/password.png'"
						autocomplete="off"
						v-model.trim="regForm.password"
						placeholder="密码"
					/>

					<Field
						type="password"
						clearable
						:maxlength="32"
						:leftIcon="'../../static/image/login/password.png'"
						autocomplete="off"
						v-model.trim="regForm.repass"
						placeholder="重复密码"
					/>

					<Field
						clearable
						autosize
						name="input"
						:maxlength="32"
						:leftIcon="'../../static/image/login/phone.png'"
						autocomplete="off"
						v-model.trim="regForm.referrer"
						placeholder="推荐人手机号"
					/>

					<!-- #ifdef H5 -->
					<view v-if="isH5Android" class="download-app" @click="handleDownLoad">已有账号？去下载</view>
					<!-- #endif -->
				</form>
				<view class="btn login-btn" @click.stop="login()">注册</view>
			</view>

			<view class="agreement">
				<image
					class="checked"
					src="../../static/image/login/checked.png"
					v-if="agreementStatus"
					@click.stop="agreementStatus = false"
				></image>
				<image
					v-else
					class="checked"
					src="../../static/image/login/un-checked.png"
					@click.stop="agreementStatus = true"
				></image>
				<view class="text" @click.stop="agreementStatus = !agreementStatus">阅读并同意</view>
				<view class="agreement-item" @click.stop="toAgreement(1)">《畅了隐私保护指引》</view>
				<view @click.stop="toAgreement(4)">《服务协议》</view>
			</view>
		</view>
	</Top-Page>
</template>

<script>
import { useloginStore } from "@/store/login"
import pinia from "@/store/index"
import packageData from "../../package.json"
import { userIdFriendKey } from "@/enums/CacheEnums.js"
import { useAddAutoFirend } from "@/hooks/useAddAutoFirend.js"
import { useSendCode } from "@/hooks/useSendCode.js"
const loginStore = useloginStore(pinia)
const { getCode, codeLoading, codeDisabled, codeText } = useSendCode()
export default {
	data() {
		return {
			agreementStatus: false,
			codeConfig: {
				codeText: codeText,
				codeDisabled: codeDisabled,
				getCode: getCode,
			},
			regForm: {
				account: "",
				realname: "",
				password: "",
				repass: "",
				code: "",
				// 推荐人手机号
				referrer: "",
			},
			forget: false,
			packData: packageData,
			globalConfig: loginStore.globalConfig,
			isH5Android: false,
		}
	},
	watch: {
		forget(val) {
			if (val) {
				this.regForm.password = "123456"
			}
		},
	},
	onLoad(e) {
		// 推荐人
		if (e.code) {
			this.regForm.referrer = e.code
		}
		// 分享扫码自动成为好友
		if (e.userId) {
			uni.setStorageSync(userIdFriendKey, e.userId)
		}

		// 如果登录扫码自动成为好友
		if (Object.keys(loginStore.userInfo).length > 0) {
			// 自动成为好友
			useAddAutoFirend(userIdFriendKey)
		}
		// #ifdef H5
		if (uni.getSystemInfoSync().platform === "android") {
			this.isH5Android = true
		}
		// #endif
	},
	mounted() {},
	methods: {
		toAgreement(id) {
			uni.navigateTo({
				url: `/pages/agreement/index?id=${id}`,
			})
		},
		handleDownLoad() {
			location.href = "https://im.jwbl.top/download/index.html"
		},
		handleInput(event) {
			let value = event.detail.value
			let filteredValue = value.replace(/[\u4e00-\u9fa5]/g, "")
			this.regForm.account = filteredValue
		},
		sendCode() {
			if (!this.regForm.account) {
				uni.showToast({
					title: "请输入账号！",
					icon: "none",
				})
				return false
			}
			let data = {
				account: this.regForm.account,
				type: 2,
			}
			this.$api.LoginApi.sendCode(data).then((res) => {
				uni.showToast({
					title: res.msg,
					icon: "none",
				})
			})
		},
		login() {
			if (this.regForm.account == "") {
				uni.showToast({
					title: "请输入账号！",
					icon: "none",
				})
				return false
			}
			if (this.regForm.realname == "") {
				uni.showToast({
					title: "请输入用户名或者昵称！",
					icon: "none",
				})
				return false
			}
			if (this.regForm.password == "" && this.regForm.password.length < 6 && this.regForm.password > 16) {
				uni.showToast({
					title: "请输入6-16位密码！",
					icon: "none",
				})
				return false
			}
			if (this.regForm.password != this.regForm.repass) {
				uni.showToast({
					title: "两次密码输入不相同！",
					icon: "none",
				})
				return false
			}
			if (this.regForm.referrer.replace(/\s/g, "") != "") {
				const phoneReg = /^[1][3456789][0-9]{9}$/
				if (!phoneReg.test(this.regForm.referrer)) {
					uni.showToast({
						title: "请输入正确的推荐人手机号！",
						icon: "none",
					})
					return false
				}
			}
			this.$api.LoginApi.register(this.regForm).then((res) => {
				if (res.code == 0) {
					// 注册安装h5 去下载页面
					let data = {
						account: this.regForm.account,
						password: this.regForm.password,
					}
					if (this.isH5Android) {
						this.tempLogin(data).then(() => {
							this.handleDownLoad()
						})
					} else {
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/login/index",
							})
						}, 2000)
					}
				} else {
					uni.showToast({
						title: `${res.msg}`,
						icon: "none",
					})
				}
			})
		},
		tempLogin(data) {
			uni.showLoading({
				title: "加载中",
				mask: true,
			})
			return new Promise((resolve) => {
				// 用于注册自动成为好友
				this.$api.LoginApi.login(data).then((res) => {
					if (res.code == 0) {
						const token = res.data.token
						uni.setStorageSync("authToken", res.data.authToken)
						uni.setStorageSync("Token", token)
						// 是否添加自动好友
						useAddAutoFirend(userIdFriendKey)
						uni.hideLoading()
            
						resolve()
					}
				})
			})
		},
	},
}
</script>

<style scoped lang="scss">
@import "./index.scss";
@import "./login-bg.scss";
:deep .cu-bar {
	background-color: transparent;
}

:deep .login-content .sfyzm {
	background: #41d429;
	color: #fff;
}
.download-app {
	padding-top: 30rpx;
	text-align: right;
	color: #0081ff;
}
.login-logo {
	width: 180rpx;
	height: 180rpx;
	font-size: 80rpx;
	text-align: center;
	line-height: 120rpx;
	border-radius: 18rpx;
}
.footer-version {
	width: 100%;
	text-align: center;
	position: fixed;
	bottom: 40rpx;
}
.remark-title {
	font-weight: 600;
}
.im-reg-btn {
	padding: 30rpx;
}
.im-login-btn {
	padding: 30rpx;
}
.forget {
	padding: 30rpx;
	text-align: right;
}
</style>
